<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .top {
        width: 100%;
        height: 100px;
        background-color: #1f2d3d;
      }

      .top > h2 {
        font-size: 36px;
        color: white;
        margin-left: 20px;
        line-height: 100px;
      }

      /* 内容区域 */
      .main {
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      /* 左侧tab切换*/
      .left-inner {
        float: left;
        width: 200px;
        height: 100%;
        color: #409eff;
        background-color: #2d3d51;
      }

      .left-inner > h2 {
        font-size: 18px;
        width: 100%;
        height: 60px;
        border: 1px solid white;
        text-align: center;
        line-height: 60px;
        background-color: transparent;
      }

      .left-inner > h2:nth-child(1) {
        color: white;
        background-color: #bfcbd9;
      }

      /* 右侧内容 输入区域 */
      .right-inner {
        float: right;
        width: calc(100% - 200px);
        height: 100%;
        overflow: hidden;
        background-color: rgba(255, 248, 230, 0.3);
      }

      .from-wrap,
      .table-wrap {
        width: 80%;
        margin: 20px auto;
        overflow: hidden;
      }

      .from-ipt,
      from-sel,
      #btn {
        float: left;
        width: calc((100% / 4) - 10px - 20px);
        outline: none;
        margin-right: 10px;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #999;
      }

      .from-sel,
      #add {
        width: calc((100% / 8) - 10px);
        padding: 8.5px 10px;
      }

      #add {
        margin-right: 0;
      }

      /* 显示区域 */
      .table-wrap {
        overflow: hidden;
        height: calc(100% - 100px);
        border: 1px solid #ccc;
      }

      .table-menu {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid gray;
        font-weight: bold;
      }

      .table-menu > li {
        float: left;
        width: calc((100% / 6) - 5px);
        text-align: center;
        margin: 14px 0;
        border-right: 1px solid #ccc;
      }

      .table-menu > li:last-child {
        border-right: 0;
      }

      #inner input,
      #inner select {
        float: left;
        width: calc((100% / 6) - 12px);
        height: 36px;
        margin: 10px 2px;
        line-height: 36px;
        outline: none;
        border: 2px solid gray;
        border-radius: 5px;
      }

      #inner select {
        width: calc((100% / 6) - 12px);
        height: 60px;
        margin-right: 15px;
      }

      .list {
        width: 100%;
        overflow: hidden;
      }

      .list > p,
      .a,
      .b,
      .c,
      .d {
        float: left;
        width: calc((100% / 6) - 5px);
        height: 36px;
        text-align: center;
        color: #444;
        padding: 10px 0;
        /* border: 1px solid red; */
        line-height: 36px;
      }

      .del,
      .eit {
        width: 40%;
        height: 36px;
        background-color: red;
        color: white;
        outline: none;
        border-radius: 4px;
        cursor: pointer;
        border: none;
      }

      .list:nth-child(2n) {
        background-color: #f1f0f0;
      }
    </style>
  </head>

  <body>
    <!-- 头部 -->
    <div class="top">
      <h2>HarmonyOS学生管理系统</h2>
    </div>
    <!-- 内容区域 -->
    <div class="main">
      <!-- 左侧tab区域 -->
      <div class="left-inner">
        <h2>信息管理</h2>
        <h2>学籍管理</h2>
        <h2>就业管理</h2>
        <h2>健康管理</h2>
      </div>
      <!-- 右侧内容区域 -->
      <div class="right-inner">
        <!-- 输入框区域 -->
        <div class="from-wrap">
          <input type="text" class="from-ipt" id="name" />
          <input type="text" class="from-ipt" id="phone" />
          <input type="text" class="from-ipt" id="major" />
          <select name="" id="sex" class="from-ipt from-sel">
            <option value="0">女</option>
            <option value="1">男</option>
          </select>
          <button id="add">添加</button>
        </div>
        <!-- 显示区域 -->
        <div class="table-wrap">
          <!--  -->
          <ul class="table-menu">
            <li>序号</li>
            <li>姓名</li>
            <li>电话</li>
            <li>专业</li>
            <li>性别</li>
            <li>操作</li>
          </ul>
          <ul id="inner">
            <!-- <li class="list">
                        <p>01</p>
                        <p class="a">小明</p>
                        <p class="b">13525793625</p>
                        <p class="c">鸿蒙开发</p>
                        <p class="d">男</p>
                        <p>
                            <button class="del">删除</button>
                            <button class="eit">修改</button>
                        </p>
                    </li>
                    <li class="list">
                        <p>01</p>
                        <p class="a">小明</p>
                        <p class="b">13525793625</p>
                        <p class="c">鸿蒙开发</p>
                        <p class="d">男</p>
                        <p>
                            <button class="del">删除</button>
                            <button class="eit">修改</button>
                        </p>
                    </li>
                    <li class="list">
                        <p>01</p>
                        <p class="a">小明</p>
                        <p class="b">13525793625</p>
                        <p class="c">鸿蒙开发</p>
                        <p class="d">男</p>
                        <p>
                            <button class="del">删除</button>
                            <button class="eit">修改</button>
                        </p>
                    </li> -->
          </ul>
        </div>
      </div>
    </div>
    <script>
      //1、封装获取id
      function $(str) {
        return document.getElementById(str);
      }
      //排序
      var index = 0;
      //2、添加功能
      $("add").onclick = function () {
        index++;
        //2-1、判断输入框是否为空
        if (
          $("name").value == "" ||
          $("phone").value == "" ||
          $("major").value == ""
        ) {
          alert("输入框不能为空,请输入正确学员信息....");
        } else {
          //3、创建节点
          var lis = document.createElement("li");
          lis.setAttribute("class", "list");
          //4、获取输入框中的字符
          var _name = $("name").value;
          var _phone = $("phone").value;
          var _major = $("major").value;
          var _sex = $("sex").value == 0 ? "女" : "男";
          //5、给创建的li添加内容
          lis.innerHTML = `
                                <p>${index < 10 ? "0" + index : index}</p>
                                <p class="a">${_name}</p>
                                <p class="b">${_phone}</p>
                                <p class="c">${_major}</p>
                                <p class="d">${_sex}</p>
                                <p>
                                    <button class="del">删除</button>
                                    <button class="eit">修改</button>
                                </p>
                                `;
          //5-1、给创建的li添加至ul
          $("inner").appendChild(lis);
          //6、删除功能
          let del = lis.getElementsByClassName("del")[0];
          del.onclick = function () {
            $("inner").removeChild(this.parentNode.parentNode);
          };
          //7、修改功能
          let eit = lis.getElementsByClassName("eit")[0];
          var flg = true;
          //8、绑定修改功能
          eit.onclick = function () {
            var eitNmae = lis.getElementsByClassName("a")[0];
            var eitPhone = lis.getElementsByClassName("b")[0];
            var eitMajor = lis.getElementsByClassName("c")[0];
            var eitSex = lis.getElementsByClassName("d")[0];

            if (flg) {
              flg = !flg;
              //9、修改按钮文本
              this.innerHTML = "确认";
              this.style.backgroundColor = "blue";
              //10、创建修改input
              var _a = document.createElement("input");
              var _b = document.createElement("input");
              var _c = document.createElement("input");
              var _d = document.createElement("select");
              //10-1、处理表单元素
              _d.innerHTML = `<option value='0'>女</option><option value='1'>男</option>`;
              //11、p标签中内容赋值给input
              _a.value = eitNmae.innerHTML;
              _b.value = eitPhone.innerHTML;
              _c.value = eitMajor.innerHTML;
              _d.value = eitSex.innerHTML == "女" ? 0 : 1;
              //12、用新节点替换旧节点
              lis.replaceChild(_a, eitNmae);
              lis.replaceChild(_b, eitPhone);
              lis.replaceChild(_c, eitMajor);
              lis.replaceChild(_d, eitSex);
              //13、给替换后的输入框添加属性class
              _a.setAttribute("class", "a");
              _b.className = "b";
              _c.classList.add("c");
              _d.setAttribute("class", "d");
            } else {
              flg = !flg;
              //9、修改按钮文本
              this.innerHTML = "修改";
              this.style.backgroundColor = "red";
              //14、创建新的替换文本
              var _Ap = document.createElement("p");
              var _Bp = document.createElement("p");
              var _Cp = document.createElement("p");
              var _Dp = document.createElement("p");
              //15、给新创建的标签赋值
              _Ap.innerHTML = eitNmae.value;
              _Bp.innerHTML = eitPhone.value;
              _Cp.innerHTML = eitMajor.value;
              _Dp.innerHTML = eitSex.value == 0 ? "女" : "男";
              //16、替换旧的输入框节点
              lis.replaceChild(_Ap, eitNmae);
              lis.replaceChild(_Bp, eitPhone);
              lis.replaceChild(_Cp, eitMajor);
              lis.replaceChild(_Dp, eitSex);
              //17、给新的节点添加类名
              _Ap.setAttribute("class", "a");
              _Bp.className = "b";
              _Cp.classList.add("c");
              _Dp.setAttribute("class", "d");
            }
          };
        }
      };
    </script>
  </body>
</html>
